<template>
  <div>
    <button @click="countClick">count:{{ count }}</button>
    <button @click="infoClick">info:{{ info }}</button>
    <button @click="msgClick">msg:{{ msg }}</button>
  </div>
</template>

<script setup>
import { ref, shallowRef } from "vue";
// 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
const count = ref(0);
const countClick = () => {
  count.value++;
};
// 如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。
const info = ref({
  name: {
    pre: "z",
    last: "jd",
  },
  age: 18,
});
const infoClick = () => {
  console.log(111);
  info.value.name.pre = "q";
};
// shallowRef() 只有对 .value 的访问是响应式的
const msg = shallowRef({
  ref: "shallowRef",
});
const msgClick = () => {
  msg.value.ref = "333";
  msg.value = { ...msg.value };
};
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
